import React from 'react'

export default function WeatherForecast({ forecastData = [], isMock = false }) {
  // 格式化日期，只显示月-日
  const formatDate = (dateStr) => {
    if (!dateStr) return '';
    const date = new Date(dateStr);
    return `${date.getMonth() + 1}-${date.getDate()}`;
  };

  // 获取天气图标
  const getWeatherIcon = (condition) => {
    if (!condition) return null;
    const conditionLower = condition.toLowerCase();
    
    if (conditionLower.includes('晴')) {
      return (
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="5" fill="#FFD700" />
          <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="#FFD700" strokeWidth="2" strokeLinecap="round" />
        </svg>
      );
    } else if (conditionLower.includes('云')) {
      return (
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 10h-.01M18 16H6C4.34315 16 3 14.6569 3 13C3 11.3431 4.34315 10 6 10H7C7 7.79086 8.79086 6 11 6C13.2091 6 15 7.79086 15 10H18C19.6569 10 21 11.3431 21 13C21 14.6569 19.6569 16 18 16Z" fill="#B0C4DE" />
        </svg>
      );
    } else if (conditionLower.includes('雨')) {
      return (
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 10h-.01M18 16H6C4.34315 16 3 14.6569 3 13C3 11.3431 4.34315 10 6 10H7C7 7.79086 8.79086 6 11 6C13.2091 6 15 7.79086 15 10H18C19.6569 10 21 11.3431 21 13C21 14.6569 19.6569 16 18 16Z" fill="#4682B4" />
          <path d="M8 13L7 16M12 15L11 18M16 13L15 16" stroke="#4682B4" strokeWidth="2" strokeLinecap="round" />
        </svg>
      );
    } else if (conditionLower.includes('雪')) {
      return (
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 10h-.01M18 16H6C4.34315 16 3 14.6569 3 13C3 11.3431 4.34315 10 6 10H7C7 7.79086 8.79086 6 11 6C13.2091 6 15 7.79086 15 10H18C19.6569 10 21 11.3431 21 13C21 14.6569 19.6569 16 18 16Z" fill="#E0E0E0" />
          <circle cx="8" cy="13" r="1" fill="white" />
          <circle cx="12" cy="15" r="1" fill="white" />
          <circle cx="16" cy="13" r="1" fill="white" />
        </svg>
      );
    } else {
      // 默认图标
      return (
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="5" fill="#FFD700" opacity="0.7" />
          <path d="M12 4v1M12 19v1M6.34 6.34l1.41 1.41M16.24 16.24l1.41 1.41M4 12h1M19 12h1M6.34 17.66l1.41-1.41M16.24 7.76l1.41-1.41" stroke="#FFD700" strokeWidth="2" strokeLinecap="round" opacity="0.7" />
        </svg>
      );
    }
  };

  // 卡片样式
  const styles = {
    container: {
      marginTop: 30,
      padding: 20,
      borderRadius: 16,
      backgroundColor: '#f8fafc',
      border: '1px solid #e2e8f0',
    },
    title: {
      fontSize: 18,
      fontWeight: 600,
      margin: '0 0 16px 0',
      color: '#0f172a',
    },
    forecastContainer: {
      display: 'flex',
      justifyContent: 'space-between',
      gap: 16,
      flexWrap: 'wrap',
    },
    forecastCard: {
      flex: '1 1 120px',
      minWidth: 120,
      backgroundColor: 'white',
      borderRadius: 12,
      padding: 16,
      textAlign: 'center',
      boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
      transition: 'transform 0.2s ease, box-shadow 0.2s ease',
    },
    date: {
      fontSize: 14,
      fontWeight: 600,
      color: '#64748b',
      marginBottom: 8,
    },
    iconContainer: {
      display: 'flex',
      justifyContent: 'center',
      marginVertical: 8,
    },
    condition: {
      fontSize: 13,
      color: '#334155',
      marginVertical: 8,
    },
    tempRange: {
      fontSize: 14,
      fontWeight: 600,
      color: '#0f172a',
      marginTop: 8,
    },
    mockLabel: {
      fontSize: 11,
      color: '#94a3b8',
      marginTop: 6,
    },
  };

  return (
    <div style={styles.container}>
      <h3 style={styles.title}>未来天气预报</h3>
      {forecastData.length === 0 ? (
        <p style={{ color: '#64748b', textAlign: 'center', padding: 20 }}>暂无预报数据</p>
      ) : (
        <div style={styles.forecastContainer}>
          {forecastData.map((day, index) => (
            <div 
              key={index} 
              style={{
                ...styles.forecastCard,
                transform: 'translateY(0)',
                boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
                ':hover': {
                  transform: 'translateY(-2px)',
                  boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                }
              }}
            >
              <div style={styles.date}>{formatDate(day.date)}</div>
              <div style={styles.iconContainer}>
                {getWeatherIcon(day.condition)}
              </div>
              <div style={styles.condition}>{day.condition}</div>
              <div style={styles.tempRange}>
                {day.maxTemp}/{day.minTemp}°
              </div>
              {isMock && <div style={styles.mockLabel}>示例数据</div>}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}